<template>
<!-- 操作备注 dialog 开始 -->
  <el-dialog width="800px" :title="$t('m.remark')" :visible="popupVisible" :before-close="close">
    <el-row class="waveHead">
      <el-col :span="4">
        <label class="flag-label">{{$t('m.review.sign')}}：</label>
      </el-col>
      <el-col :span="20" align="left">
        <el-radio-group v-model="remarkData.marktype">
          <el-radio :label="0"><i class="el-icon-s-flag flag info"></i></el-radio>
          <el-radio :label="1"><i class="el-icon-s-flag flag primary"></i></el-radio>
          <el-radio :label="2"><i class="el-icon-s-flag flag warning"></i></el-radio>
          <el-radio :label="3"><i class="el-icon-s-flag flag danger"></i></el-radio>
        </el-radio-group>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="4">{{$t('m.remark')}}：</el-col>
      <el-col :span="20">
      <el-input type="textarea" maxlength="500" :rows="3" v-model="remarkData.remark"></el-input>
      </el-col>
    </el-row>
    <el-row style="padding-top:20px">
      <el-button size="mini" type="primary" :loading="btnLoading" @click="submit">{{$t('m.review.submit')}}</el-button>
      <el-button size="mini" @click="close">{{$t('m.close')}}</el-button>
    </el-row>
    <el-divider></el-divider>

    <el-row>
      <el-col align="left" style="padding-bottom:20px;font-size:20px">{{$t('m.review.remarkdetails')}}</el-col>
      <el-col align="left">
        <template v-if="popupData.detail.length">
          <el-timeline>
            <el-timeline-item v-for="(item, index) in popupData.detail" :key="index" :timestamp="timestampSimple(item.createtime)" placement="top">
              <el-card>
                <h4>{{item.remark}}</h4>
                <p>{{item.username}} {{$t('m.review.submittedon')}} {{timestampToTime(item.createtime)}}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </template>
        <template v-else>
          <p>{{$t('m.review.noremark')}}</p>
        </template>
      </el-col>
    </el-row>
  </el-dialog>
  <!-- 操作备注 dialog 结束 -->
</template>
<script>
import common from '@/utils/common'
export default {
  name:'handle-remark-popup',
  props:['popupVisible','popupData'],
  mixins:[],
  data(){
    return {
      // 备注
      remarkData:{
        marktype:0, // 标记类型
        remark:'' // 备注信息
      },
      timestampSimple:common.timestampSimple,
      timestampToTime:common.timestampToTime,

      btnLoading:false // 控制按钮loading，防止重复提交
    }
  },
  mounted(){
  },
  methods:{
    close(){
      this.$emit('close')
    },
    submit(){
      let options = {
        method:'post',
        url:`/reviewpackaging/remark/${this.popupData.id}`,
        data:{...this.remarkData}
      }
      this.btnLoading = true
      this.$axios(options).then(() => {
        this.btnLoading = false
        this.callbackMessage(this.$t('m.review.submittedsuccess'))
        this.$emit('callback')
        this.$emit('close')
      }).catch(()=>{
        this.btnLoading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.flag-label{line-height: 40px;}
.flag{font-size: 40px; vertical-align: middle;}
.info{color: #909399}
.primary{color: #409EFF}
.warning{color: #E6A23C}
.danger{color: #F56C6C}
</style>